<!--
 * @Author: GuoShuning
 * @Date: 2022-12-15 14:02:11
 * @LastEditors: GuoShuning
 * @LastEditTime: 2022-12-21 11:28:44
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./common/css/coommon.css" />
  <title>供应商列表</title>
  <style></style>
</head>

<body>
  <div class="shareBaseList" id="app">
    <div class="topBox itemBoxContent">
      <div class="itemBox_boxTitle">供应商列表</div>
      <div class="allSelect">
        <div class="leftSelect">
          <div class="itemSelect">
            <div class="input-group">
              <label>资料名称</label>
              <input placeholder="输入关键字" />
            </div>
          </div>
          <div class="itemSelect">
            <div class="select-group">
              <label>资料类型</label>
              <div class="options">
                <input placeholder="输入关键字" />
                <ul>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="rightBtn">
          <button class="button_primary button_icon">
            <i class="bi bi-search btnIcon"></i>搜索
          </button>
          <button class="button_primary_plain button_icon">
            <i class="bi bi-arrow-clockwise btnIcon"></i>重置
          </button>
        </div>
      </div>
    </div>
    <div class="bottomBox itemBoxContent">
      <div class="tableTop">
        <div class="tableTop_allCount">
          <div class="tableListCount">供应商总数 <span>12</span>个</div>
          <div class="tableListCount tableListCount_child">供应商总数 <span>12</span>个</div>
        </div>
        <div class="tableTop_rightAction">
          <button class="button_icon button_warning_plain " @click="onNewFolder"><img
              src="./common/img/ghcj2/wenjianjia.png" />&ensp;新建文件夹</button>
          <button id="showEl" class="button_icon button_primary_plain" @click="onNewFile"><img
              src="./common/img/upload_blue.png" />&ensp;上传资料</button>
        </div>
      </div>
      <div style="height: 490px; overflow-y: auto">
        <div class="table" v-for="item in list">
          <div class="table-header" style="cursor: pointer" @click="()=>{
            item.isShow = !item.isShow
          }">
            <div class="tr">
              <div class="td" style="width: 98%">
                <img v-show="!item.isShow" src="./common/img/xiala2.png" style="margin-right: 5px" />
                <img v-show="item.isShow" src="./common/img/xiala2.png"
                  style="margin-right: 5px; transform: rotate(90deg)" />
                某某某某某某某某某
              </div>
              <div class="td">
                <img @click.stop="()=>{}" src="./common/img/ghcj2/add.png" />
                &ensp;&ensp;
                <img @click.stop="()=>{}" src="./common/img/three-dot.png" />
              </div>
            </div>
          </div>
          <div class="table-body" v-show="item.isShow">
            <div class="tr" v-for="_item in 2">
              <div style="width: 99.5%; display: flex">
                <div class="td" style="width: 25%">某某某项目资料</div>
                <div class="td" style="width: 25%">资料类型 汇报PPT</div>
                <div class="td" style="width: 25%">创建人 某某某</div>
                <div class="td" style="width: 25%">
                  更新时间 2022-09-24 13:55:00
                </div>
              </div>
              <div class="td center">
                <img @click.stop="()=>{}" src="./common/img/three-dot.png" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <span>共 {{total}} 条</span>
        <ul>
          <li @click="shang"><i class="bi bi-chevron-left"></i></li>
          <li v-show="start > 0" @click="()=>{
              if(start > 0){
                params.page = start;
                end-=3
                start-=3
              }
            }">
            ...
          </li>
          <li @click="onCurrentPage(item)" v-for="item in totalPage" v-show="item < end && item > start"
            :class="[item == params.page ? 'active' :'']">
            {{item}}
          </li>
          <li v-show="end <= totalPage" @click="()=>{
              if(end <= totalPage){
              params.page = end;
              end+=3
              start+=3
              }
            }">
            ...
          </li>
          <li @click="next"><i class="bi bi-chevron-right"></i></li>
        </ul>
      </div>
    </div>
    <div id="newFolder_yik">
      <img src="./common/img/ghcj2/wj.png" />
      <div class="content_text">
        <p>某某某某某某项目</p>
        <br />
        <div class="input-group">
          <input id="input" placeholder="输入文件夹名称" style="width: 360px" />
        </div>
      </div>
    </div>
    <div id="newFile_yik">
      <p>某某某某某某项目 <img src="./common/img/right.png" /> 资料</p>
      <div class="select-group">
        <div class="options">
          <input prop="name1" placeholder="输入关键字" style="width: 450px" />
          <ul>
            <li>输入关键字</li>
            <li>输入关键字</li>
            <li>输入关键字</li>
            <li>输入关键字</li>
          </ul>
        </div>
      </div>
      <div class="upload">
        <p>支持上传文件为：jpg、pdf、ppt</p>
        <div class="upload-content">
          <img src="./common/img/ghcj2/Group427319875.png" />
          <button id="onUpload" onclick="onUpload">选择文件</button>
          <input prop="url" style="display: none" />
          <br />
          <p id="onUploadText"></p>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="./common/js/vue.js"></script>
<script type="module">
  import PropsForm from "./common/js/propsForm.js";
  import { childMessage } from "./common/js/event.js";
  import DiaLog from "./common/js/diaLog.js";
  const { createApp } = Vue;
  //上传文件
  document.getElementById("onUpload").addEventListener("click", () => {
    const input = document.createElement("input");
    input.type = "file";
    document.body.appendChild(input);
    input.click();
    // 上传结束之后，删除此图标
    input.remove();
    input.onchange = function (val) {
      const filePath = val.target.files[0];
      const formData = new FormData();
      formData.append("file", filePath);
      // ajax之后在赋值
      newFile_yik.doc.querySelector("input[prop=url]").value = filePath.name;
      newFile_yik.doc.querySelector("#onUploadText").innerText =
        filePath.name;
    };
  });
  // 新建文件夹弹框
  let newFolder_yik = new DiaLog({
    title: "新建文件夹",
    width: "543px",
    el: "#newFolder_yik",
    cancelText: "取消",
    confirmText: "确定",
    cancel: () => {
      newFolder_yik.hide();
    },
    confirm: (document) => {
      newFolder_yik.hide();
    },
  });
  // 上传资料弹框
  let newFile_yik = new DiaLog({
    title: "上传资料",
    width: "500px",
    el: "#newFile_yik",
    cancelText: "取消",
    confirmText: "确定",
    cancel: () => {
      newFile_yik.hide();
    },
    confirm: (document) => {
      let propForm = new PropsForm({
        el: newFile_yik.doc.querySelector("#newFile_yik"),
      });
      console.log(propForm.form);
    },
  });
  // newFile_yik.show();
  createApp({
    data() {
      return {
        total: 0,
        totalPage: 0,
        start: 0,
        end: 4,
        list: [
          {
            isShow: true,
          },
          {
            isShow: true,
          },
          {
            isShow: true,
          },
        ],
        params: {
          page: 1,
          limit: 10,
        },
      };
    },
    //页面初始化加载
    mounted() {
      console.log("页面初始化加载");
      this.get();
    },
    //所有函数都写在这里
    methods: {
      //成本概算审批
      onCostEstimateApproval() {
        childMessage({
          src: "./项目详情（售前-成本概算审批）.html",
          type: "page",
        });
      },
      //新建文件夹弹框
      onNewFolder() {
        newFolder_yik.show();
      },
      //上传资料弹框
      onNewFile() {
        newFile_yik.show();
      },
      shang() {
        if (this.params.page > 1) this.params.page--;
        if (this.params.page < this.start + 1) {
          this.end -= 3;
          this.start -= 3;
        }
        this.get();
      },
      next() {
        if (this.params.page < this.totalPage) this.params.page++;
        if (this.params.page > this.end - 1) {
          this.end += 3;
          this.start += 3;
        }
        this.get();
      },
      onCurrentPage(page) {
        this.params.page = page;
      },
      //接口
      get() {
        // ajax 请求
        // $.ajax()
        this.totalPage = 10; // 总页数
        this.total = 100; //总条数
      },
    },
  }).mount("#app");
</script>

</html>